<template>
  <div class="admin">
    <!-- 用于搜索的部分 -->
    <div class="admin-search">
      <form action="" @submit.prevent="serach">
        <div class="admin-sear-top">
          <div>
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
          </div>
          <div>
            <el-button native-type="reset">重置</el-button>
            <el-button type="primary" native-type="submit">查询搜索</el-button>
          </div>
        </div>
        <div class="admin-search-bt">
          <span>账号/姓名:</span>
          <el-input
            class="search"
            size="small"
            placeholder="搜索账号或者姓名"
            v-model="pager.keyword"
          ></el-input>
        </div>
      </form>
    </div>

    <!--中间还有一块用于添加的 -->
    <div class="add-bar">
      <div class="l">
        <i class="el-icon-document"></i>
        <span>数据列表</span>
      </div>
      <div class="r">
        <el-button type="primary" @click="isShowEditUser = true"
          >添加</el-button
        >
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table :data="list" border style="width: 100%; text-align: center">
      <el-table-column align="center" prop="id" label="编号"> </el-table-column>
      <el-table-column align="center" prop="username" label="账号">
      </el-table-column>
      <el-table-column align="center" prop="nickName" label="姓名">
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱">
      </el-table-column>
      <el-table-column align="center" label="添加时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后登录">
        <template slot-scope="scope">
          <span>{{ scope.row.loginTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#409eff"
            inactive-color="#cccccc"
            :active-value="1"
            :inactive-value="0"
            @change="
              (status) => {
                statusChange(scope.row.id, status);
              }
            "
          >
            >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-permission="'allocRole'"
            @click="editRole(scope.row.id)"
            >分配角色</el-button
          >
          <el-button
            type="text"
            v-permission="'editUser'"
            @click="editUser(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <div class="page-container">
      <el-pagination
        :current-page="pager.pageNum"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      >
      </el-pagination>
    </div>

    <EditUser
      :visible="isShowEditUser"
      @show="showEditUser"
      :did="userId"
    ></EditUser>
    <EditRole
      :visible="isShowEditRole"
      @show="showEditRole"
      :did="roleId"
    ></EditRole>
  </div>
</template>
<script>
import { getAdminList, updateStauts } from '@/request/api'
import EditUser from './components/EditUser.vue'
import EditRole from './components/EditRole.vue'
export default {
  components: { EditUser, EditRole },
  data() {
    return {
      roleId: -1,
      userId: -1,
      // 控制添加和编辑账号dialog
      isShowEditUser: false,
      // 控制分配角色的dialog
      isShowEditRole: false,
      list: [],
      // // 分页的当前页
      // currentPage: 1,
      // // 一页显示的条数
      // pageSize: 10,
      // 总条数
      total: 0,
      pager: {
        keyword: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    editRole(id) {
      this.isShowEditRole = true
      // 一定要两个组件使用不败的变量来家存储id，为的是两个组件里面的数据不会互相影响，哪怕是确实用的同一个id
      this.roleId = id
    },
    showEditRole(reload) {
      this.isShowEditRole = false
      // 重置数据
      this.roleId = -1
      reload && this.getUsers()
    },
    editUser(id) {
      // 把dialog显示
      this.isShowEditUser = true
      // 把dialog的did修改
      this.userId = id
    },
    showEditUser(isShow) {
      this.isShowEditUser = false
      // 每次关闭dialog都要把数据进行重置
      this.userId = -1
      // 重新请求数据，让数据是最新的
      this.getUsers()
    },
    serach() {
      // 把 页码变成 第 1 页
      this.pager.pageNum = 1
      this.getUsers()
    },
    pageSizeChange(size) {
      this.pager.pageSize = size
      // 如果 每页 数量 修改，一定要从 第1页开始请求，因为不保证，页面条数变化后，还有数据足够
      this.pager.pageNum = 1
      this.getUsers()
    },
    pageChange(page) {
      this.pager.pageNum = page
      this.getUsers()
    },
    statusChange(id, status) {
      updateStauts({
        id, status
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功")
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getUsers() {
      getAdminList({
        // // 用来实现搜索的关键字 - string
        // keyword: '',
        // // 分布获取数据的第几页 - number
        // pageNum: 1,
        // // 分页获取的 每页 有多少条数据 - number
        // pageSize: 10,
        ...this.pager
      }).then(res => {
        if (res.code === 200) {
          // console.log(res.data.list);
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang = "less" scoped>
.admin {
  font-size: 14px;
  .admin-search {
    box-shadow: 0 0 4px 2px #ccc;
    padding: 10px;
    border-radius: 4px;
    .admin-sear-top {
      display: flex;
      justify-content: space-between;
    }
    .admin-search-bt {
      display: flex;
      align-items: center;
      .search {
        width: 200px;
        margin-left: 10px;
      }
    }
  }

  .add-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 4px 2px #ccc;
    margin: 20px auto;
    .l {
      span {
        margin-left: 10px;
      }
    }
  }

  .page-container {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }
}
</style>